<template>
	<div class="app">
		<h2>求和为{{ sum }}</h2>
		<h2>名字为{{ person.name }}</h2>
		<h2>年龄为{{ person.age }}</h2>
		<h2>汽车信息{{ car }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改人</button>
		<button @click="changeBrand">修改车的品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeEngine">修改发动机</button>
		<button @click="changeCar">修改车</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,shallowRef ,reactive,shallowReactive} from 'vue'
	// shallowRef,shallowReactive只处理第一层的响应式，只关注整体修改1时使用
	let sum = shallowRef(0)
	let person = shallowRef({
		name:'zhangsan',
		age:18
	})
	let car = shallowReactive({
		brand:'benchi',
		options:{
			color:'red',
			engine:'V8'
		}
	})

	function changeSum(){
		sum.value += 1
	}
	function changeName(){
		person.value.name = 'lisi'
	}
	function changeAge(){
		person.value.age +=1
	}
	function changePerson(){
		person.value = {name:'wangwu',age:30}
	}
	function changeBrand(){
		car.brand = '大众'
	}
	function changeColor(){
		car.options.color = 'pink'
	}
	function changeEngine(){
		car.options.engine = 'V7'
	}
	function changeCar(){
		Object.assign(car,{brand:'红旗',options:{color:'red',engine:'V10'}})
	}


</script>

<style scoped>
	.app{
		margin: 10px auto;
		padding: 10px;
		background-color: skyblue;
		border-radius: 10px;
		box-shadow: 0  0 10px;
	}
	button{
		height: 30px;
		margin: 5px;
	}
</style>